<template>
  <div class="box-card">
    <el-container>
      <el-header height="57px" class="pass-header"> </el-header>
      <el-main class="pass-main">
        <div
          class="cross-pass"
          v-loading="loading"
          element-loading-text="正在加载数据..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div class="left-box" v-if="!loading">
            <div class="playground-container">
              <div class="playground-top">
                <div class="shot-success">
                  <img
                    src="../../../../assets/image/shot/circle.png"
                    class="goal"
                    alt=""
                  />
                  <span>进球</span>
                </div>
                <div class="shot-deviation">
                  <img
                    src="../../../../assets/image/shot/shotSquare.png"
                    class="square"
                    alt=""
                  />
                  <span>射偏</span>
                </div>
                <div class="shot-post">
                  <img
                    src="../../../../assets/image/shot/diamond.png"
                    class="diamond"
                    alt=""
                  />
                  <span>射门中柱</span>
                </div>
                <div class="shot-resistance">
                  <img
                    src="../../../../assets/image/shot/fork.png"
                    class="fork"
                    alt=""
                  />
                  <span>射门阻挡</span>
                </div>
              </div>
              <HalfPlayGround
                :my_shot_success="my_shot_success"
                :my_shot_deviation="my_shot_deviation"
                :my_shot_post="my_shot_post"
                :my_shot_resistance="my_shot_resistance"
              />
              <img
                class="attack-arrow"
                src="../../../../assets/image/playerGround/rightArrow.png"
                alt=""
              />
            </div>
          </div>
          <div class="right-box" v-if="!loading">
            <div class="time-column">
              <timeColumn />
            </div>
            <div class="offside">
              <div class="miss-goal-offside">
                <div class="miss-goal-number">
                  <div>0</div>
                  <span>错失机会</span>
                </div>
                <div class="miss-goal-block"></div>
                <div class="miss-goal-number">
                  <div>7</div>
                  <span>越位数</span>
                </div>
              </div>
              <div class="goals-type">
                <typeColumn />
              </div>
            </div>
            <div class="shoot-table">
              <shotTable />
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import HalfPlayGround from "../../../playground/HalfPlayGround";
import timeColumn from "./shootComp/timeColumn";
import typeColumn from "./shootComp/typeColumn";
import shotTable from "./shootComp/shotTable";
export default {
  name: "Shoot",
  props: {
    playerId: {
      type: Number,
    },
  },
  components: {
    HalfPlayGround,
    timeColumn,
    typeColumn,
    shotTable,
  },
  data() {
    return {
      activePane: "AllPass",
      loading: false,
      my_shot_deviation: [
        { x1: "87.70%", y1: "18.80%" },
        { x1: "20.70%", y1: "28.80%" },
        { x1: "37.70%", y1: "18.80%" },
      ],
      my_shot_success: [
        { x1: "50.70%", y1: "50.80%" },
        { x1: "80.70%", y1: "34.80%" },
        { x1: "33.70%", y1: "81.80%" },
      ],
      my_shot_post: [
        { x1: "20.70%", y1: "70.80%" },
        { x1: "40.70%", y1: "44.80%" },
        { x1: "83.70%", y1: "22.80%" },
      ],
      my_shot_resistance: [
        { x1: "30.70%", y1: "10.80%" },
        { x1: "30.70%", y1: "80.80%" },
        { x1: "38.70%", y1: "66.80%" },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
}
.pass-main {
  height: 496px;
  padding: 0;
  background-color: #f1f6f9;
}
.cross-pass {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.left-box {
  height: 456px;
  margin-left: 90px;
}
.right-box {
  width: 560px;
  height: 413px;
  margin-top: 18px;
  margin-right: 70px;
  /*background-color: yellow;*/
  .time-column {
    width: 100%;
    height: 150px;
    /*background-color: red;*/
  }
  .offside {
    display: flex;
    width: 100%;
    height: 150px;
    /*background-color: #9a6e3a;*/
    .miss-goal-offside {
      display: flex;
      justify-content: space-around;
      width: 45%;
      height: 100%;
      /*background-color: #B500FE;*/
      .miss-goal-number {
        width: 40%;
        height: 100%;
        /*background-color: #01538B;*/
        div {
          margin-top: 20px;
          height: 60%;
          line-height: 90px;
          font-weight: bold;
          font-size: 72px;
          color: #bbbbbb;
          /*background-color: #9a6e3a;*/
        }
        span {
          line-height: 30px;
          font-size: 18px;
          font-weight: bold;
          color: #000000;
        }
      }
      .miss-goal-block {
        margin-top: 40px;
        width: 1%;
        height: 40%;
        background-color: #bbbbbb;
      }
    }
    .goals-type {
      width: 55%;
      height: 100%;
      /*background-color: red;*/
    }
  }
  .shoot-table {
    width: 100%;
    height: 113px;
  }
}
.playground-container {
  position: relative;
  width: 620px;
  height: 456px;
  /*background-color: red;*/
  margin-top: 18px;
  .playground-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 591px;
    color: #656f73;
    line-height: 25px;
    font-size: 16px;
    height: 25px;
    text-align: left;
    /*background-color: red;*/
    .shot-success,
    .shot-deviation {
      margin-left: 20px;
      width: 55px;
      height: 25px;
      /*background-color: yellow;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .shot-post,
    .shot-resistance {
      margin-left: 20px;
      width: 100px;
      height: 25px;
      /*background-color: yellow;*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 20px;
      /*height: 25px;*/
    }
  }
  .playground-right {
    position: absolute;
    top: 30px;
    left: 591px;
    color: #bd1e1e;
    width: 32px;
    height: 323px;
    /*background-color: blue;*/
  }
  .attack-arrow {
    position: absolute;
    top: 267px;
    left: 541px;
    width: 150px;
    height: 40px;
    /*background-color: blue;*/
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -moz-transform: rotate(-90deg); /* Firefox */
    -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
    -o-transform: rotate(-90deg); /* Opera */
  }
  .cross-zone {
    width: 591px;
    height: 90px;
    margin-top: 13px;
    background-color: #b500fe;
  }
}
.ant-v {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*background-color: red;*/
  line-height: 10px;
  width: 100%;
  height: 223px;
  .two-graph {
    display: flex;
    justify-content: space-between;
    .one-graph {
      width: 230px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .one-graph-title {
        height: 20px;
        line-height: 20px;
      }
    }
  }
  .graph-legend {
    height: 25px;
    color: #656f73;
    font-size: 14px;
    line-height: 25px;
  }
}
</style>
